<template>
  <!-- 展示 压缩文件/ img图片 支持放大和下载 -->
  <div v-if="fileList.length > 0">
      <div v-for="(file, index) in fileList" :key="index" @mouseover="param.showMode = index" @mouseleave="param.showMode = null" style="float: left;">
        <template v-if="index < 10">
          <div v-if="showFile(file) == 'zip'">
            <img :src="zipUrl" class="img_css" />
          </div>
          <div v-else-if="showFile(file) == 'pdf'">
            <pdfViewer :url="file.url" class="img_css"></pdfViewer>
          </div>
          <div v-else>
            <img :src="file.url" class="img_css" :class="param.showMode == index ? 'icon_css_hover' : ''">
          </div>
          <div v-if="param.showMode == index" id="icon_css">
            <el-icon v-if="showFile(file) != 'zip'" @click="handleShowBigImg(file)" id="icon_css_View">
              <View />
            </el-icon>
            <el-icon :disabled="param.loading" @click="downloadFile(file)" id="icon_css_Download">
              <Download />
            </el-icon>
          </div>
          <!-- <div v-if="showFile(file)">{{ fileType(file) }}</div> -->
        </template>
      </div>
  </div>
  <div v-else><span>无</span></div>
  

  <el-dialog v-model="param.showBigImg">
    <pdfViewer v-if="param.fileType == 'pdf'" :url="param.urlBigImg" style="width: 100%;"></pdfViewer>
    <img v-else :src="param.urlBigImg" style="width: 100%;">
  </el-dialog>

</template>
<script setup lang="ts">
import pdfViewer from '@/components/pdf'
import { computed, ref } from 'vue';
import { downloadIamge, generateResume } from '@/utils/download'
import zipUrl from '@/assets/images/Files.png'

const props = defineProps({
  detailFileList: {
    type: Array,
    default: () => { [] }
  }
})

const param = ref({
  showMode: null,
  showBigImg: false,
  urlBigImg: ''
})

const fileList = computed(() => {
  if (props.detailFileList) {
    return JSON.parse(props.detailFileList) || []
  } else {
    return []
  }
})
const showFile = (file: any) => {
  if (fileType(file) == 'zip' || fileType(file) == 'rar') {
    return 'zip'
  } else if (fileType(file) == 'pdf') {
    return 'pdf'
  } else {
    return 'img'
  }
}

const fileType = (file: any) => {
  if (file && file.originalFileName) {
    return file.originalFileName.split('.').pop()
  } else {
    return ''
  }
}

const handleShowBigImg = (file: any) => {
  if (file.url) {
    param.value.urlBigImg = file.url
    param.value.fileType = fileType(file)
  }
  param.value.showBigImg = true
}

const downloadFile = (file: any) => {
  param.value.loading = true
  downloadIamge(file.url,file.originalFileName || new Date(Date.now()+28800000).toISOString()).then(res => {
    param.value.loading = false
  }).catch(err => {
    param.value.loading = false
  })
}

</script>
<style scoped>
.img_css {
  width: 100px;
  height: 100px;
  margin: 2px 2px 2px 2px;
  overflow: hidden;
  box-shadow: 0 0 15px #999;
  border-radius: 5px;
}

.icon_css_hover {
  background-color: #000000;
  opacity: 0.5;
}

#icon_css {
  margin-top: -65px;
  height: 65px;

}

#icon_css_View {
  width: 50px;
  cursor: pointer;
  font-size: 20px;
}

#icon_css_Download {
  width: 50px;
  cursor: pointer;
  font-size: 20px;
}
</style>